<template>
    <div class="container">
        <div class="top">
            <div class="number bg">
                <el-icon :size="50" color="#337ecc">
                    <UserFilled />
                </el-icon>
                <div class="text">
                    <span>管理员</span>
                    <span>{{ info.admin }}</span>
                </div>
            </div>
            <div class="number bg">
                <el-icon :size="50" color="#529b2e">
                    <Memo />
                </el-icon>
                <div class="text">
                    <span>导航数量</span>
                    <span>{{ info.nav }}</span>
                </div>
            </div>
            <div class="number bg">
                <el-icon :size="50" color="#b88230">
                    <View />
                </el-icon>
                <div class="text">
                    <span>总访问量</span>
                    <span>{{ info.visits }}</span>
                </div>
            </div>
        </div>
        <div class="middle bg" ref="el"></div>
        <div class="footer bg">
            <p class="title">最近访问记录:</p>
            <el-table :data="logList?.data" border stripe>
                <el-table-column prop="id" label="ID" width="90" align="center" />
                <el-table-column prop="Admin.name" label="管理员" width="150" align="center" />
                <el-table-column prop="ip" label="IP" width="170" align="center" />
                <el-table-column prop="created_at" label="时间" width="180" :formatter="formatTime" align="center" />
                <el-table-column prop="router" label="路由" min-width="150" align="left" />
                <el-table-column prop="message" label="内容" min-width="200" align="center" />
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getAdminLogs, getInfos, getVisitInfo } from '@/apis/auth'
import { formatTime } from '@/utils/help'
import * as echarts from 'echarts'
import { ref, onBeforeMount, onMounted } from 'vue'

const el = ref<HTMLElement>()
const logList = ref<PageResponse<AdminLogsModel>>()
const info = ref<InfoResponse>({ admin: 1, nav: 2, visits: 3 })
const visits = ref<VisitInfo[]>()
const options = ref()

async function getLogList() {
    const r = await getAdminLogs({ page: 1, limit: 5 })
    logList.value = r.data
}
async function getInfo() {
    const r = await getInfos()
    info.value = r.data
}
async function getVisits() {
    const r = await getVisitInfo()
    visits.value = r.data
}

async function setOption() {
    await getVisits()
    options.value = {
        title: {
            text: '近30天访问详情',
            x: 'center',
            y: '15px',
            textStyle: {
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                snap: true,
            }
        },
        xAxis: {
            type: 'category',
            data: Object.keys(visits.value!),
            boundaryGap: false,
            axisLabel: {
                rotate: 20
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: Object.values(visits.value!),
                type: 'line',
                smooth: true,
                markPoint: {
                    data: [{ type: 'max', valueIndex: 1, name: '最大值' },]
                },
                markLine: {
                    data: [{ type: 'average', name: '平均值' }],
                    lineStyle: {
                        color: '#b88230'
                    }
                }
            }
        ]
    }
}

onBeforeMount(async () => {
    await getLogList()
    await getInfo()
})
onMounted(async () => {
    const myChart = echarts.init(el.value)
    await setOption()
    myChart.setOption(options.value)
    window.addEventListener('resize', () => {
        myChart.resize()
    })
})
</script>

<style lang="scss" scoped>
.container {
    min-width: 600px;

    .bg {
        background: var(--el-bg-color);
    }

    .top {
        display: flex;
        gap: 30px;
        margin-bottom: 10px;

        .number {
            flex: 1 0 180px;
            padding: 30px 15px;
            box-shadow: var(--el-box-shadow-lighter);
            transition: box-shadow 0.3s;
            display: flex;
            justify-content: space-around;
            align-items: center;

            &:hover {
                box-shadow: var(--el-box-shadow);
            }

            .text {
                display: flex;
                flex-direction: column;
                gap: 5px;
                text-align: center;

                span {
                    &:first-of-type {
                        font-size: 16px;
                    }

                    &:last-of-type {
                        font-size: 14px;
                    }
                }
            }
        }
    }

    .middle {
        margin-bottom: 10px;
        width: 100%;
        height: 500px;
        box-shadow: var(--el-box-shadow-lighter);
    }

    .footer {
        margin-bottom: 10px;
        box-shadow: var(--el-box-shadow-lighter);
        padding: 20px;

        .title {
            font-size: 16px;
            margin-bottom: 10px;
        }
    }
}
</style>